<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
  <style>
  </style>
</head>

<body>
  <div id="app">
    <!-- vue种得常用修饰符 -->
    <!-- v-on的常用修饰符 -->
    <!-- .stop：取消事件冒泡 -->
    <div @click="divClick">
      父元素
      <button @click.stop="btnClick">点击</button>
    </div>
    <!-- prevent：取消默认事件-->
    <a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a>
    <!-- .{keyCode(键盘的编码) | keyAlias(键盘的简写)}：只有当事件是从特定的键触发时才会触发回调 -->
    <input type="text" @keyup.enter="keyUp">
    <!-- .once：只能触发一次回调 -->
    <button @click.once="onceClick">点击once</button>
    <hr>
    <!-- .lazy: 可以让数据在失去焦点或者回车的时候才会更新 -->
    <input type="text" v-model.lazy="message">
    <p>{{message}}</p>
    <!-- .number: 将输入框种内容转为数字类型 -->
    <input type="text" v-model.number="age">
    <p>{{typeof age}}</p>
    <!-- .trim : 去除首尾的空格 -->
    <input type="text" v-model.trim="name" @keyup="namekeyup">
  </div>
</body>
<script>
  var app = Vue.createApp({
    data() {
      return {
        message: 'helloworld',
        age: 18,
        nam: ''
      }
    },
    methods: {
      divClick: function () {
        console.log('父元素被点击了');
      },
      btnClick: function () {
        console.log('按钮被点击了');
      },
      aClick: function () {
        console.log('a标签被触发了');
      },
      keyUp: function () {
        console.log('keyUp被触发了');
      },
      onceClick: function () {
        console.log('onceClick被点击了');
      },
      namekeyup: function () {
        console.log(this.name);
      },
    }
  })
  app.mount('#app')
</script>

</html>